<template>
	<tm-fullView>
		<tm-menubars title="侧边导航" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :padding="[0,0]" :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">基础示例</view>
			<tm-sliderNav  @change="change" :list="list" ></tm-sliderNav>
		</tm-sheet>
		<tm-sheet :padding="[0,0]" :shadow="24">
			<view class="pa-12 text-size-s text-weight-b blue text mb-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">自定宽度，圆角，背景，字体颜色</view>
			<tm-sliderNav  :round="0" :bg-color="$tm.vx.state().tmVuetify.color?$tm.vx.state().tmVuetify.color:'blue'" font-color="white" color="blue" :width="140" @change="change" rang-key="text" :list="list2" text  ></tm-sliderNav>
		</tm-sheet>
					
		
		<view style="height: 50upx;"></view>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSliderNav from "@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue"
	
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSliderNav},
		data() {
			return {
				list:[
					{title:'苏州'},
					{title:'北京'},
					{title:'广东',disabled:true},
					{title:'江西',dot:8},
					{title:'深圳'},
				],
				list2:[
					{text:'苏州'},
					{text:'北京'},
					{text:'广东'},
					{text:'江西',dot:8},
					{text:'深圳'},
				]
			}
		},
		methods: {
			change(e){
				uni.$tm.toast(`您选中了:${e}`)
			}
		}
	}
</script>

<style>

</style>
